<template>
	<view class="flex-col homepage">
		<view class="wrapper">
			<u-swiper class="kkk" height="300" :list="list4" keyName="url" :autoplay="false"></u-swiper>
		</view>
		<view class="flex-col wrapper-two">
			<view class="flex-row wraper-row-two">
				<view class="box"></view>
				<view class="u-line-1 text">常用服务</view>
			</view>
			<view class="flex-row wraper-row-three">
				<view class="box-two" @click="www"></view>
				<view class="box-four" @click="fangke"></view>
				<view class="box-five"></view>
			</view>
			<view class="flex-row wraper-row-four">
				<image src="../../static/user/tab_icon/amount.png" mode=""
					style="width: 100rpx; height: 100rpx; position: absolute; left: 5rpx; top: -110rpx; border-radius: 30px;">
				</image>

				<view class="u-line-1 text-three" @click="www">生活缴费</view>
				<image class="icon" src="../../static/user/tab_icon/account.png" mode=""
					style="width: 100rpx; height: 100rpx; position: absolute; left: 245rpx; top: -115rpx; border-radius: 30px;">
				</image>

				<view class="u-line-1 text-four" @click="fangke">邀请访客</view>
				<image src="../../static/service/tcjf.png" mode=""
					style="width: 100rpx; height: 100rpx; position: absolute; right: 20rpx; top: -115rpx; border-radius: 30px;">
				</image>

				<view class="u-line-1 text-five" @click="tcjf">停车缴费</view>
			</view>

		</view>
		<view class="flex-col wrapper-three">
			<view class="flex-row wraper-row-five">
				<view class="box-six"></view>
				<view class="u-line-1 text">智慧社区</view>
			</view>
			<view class="flex-row wraper-row-six">
				<view class="box-seven" @click="weixiu"></view>
				<view class="box-eight"></view>
				<view class="box-nine" @click="shequ"></view>
				<view class="box-ten" @click="gonggao"></view>
			</view>
			<view class="flex-row wraper-row-seven">
				<image class="icon" src="../../static/user/tab_icon/xieyi.png" mode=""
					style="width: 100rpx; height: 100rpx; position: absolute; left: 3rpx; top: -100rpx; border-radius: 30px;">
				</image>

				<view class="u-line-1 text-two" @click="weixiu">维修上报</view>
				<image src="../../static/service/tsjy.png" mode=""
					style="width: 100rpx; height: 100rpx; position: absolute; left: 165rpx; top: -100rpx; border-radius: 30px;">
				</image>

				<view class="u-line-1 text-three" @click="tsjy">投诉建议</view>
				<image src="../../static/service/sqhd.png" mode=""
					style="width: 100rpx; height: 100rpx; position: absolute; left: 315rpx; top: -100rpx; border-radius: 30px;">
				</image>

				<view class="u-line-1 text-four" @click="shequ">社区活动</view>
				<image src="../../static/service/gggs.png" mode=""
					style="width: 110rpx; height: 110rpx; position: absolute; left: 470rpx; top: -100rpx; border-radius: 30px;">
				</image>

				<view class="u-line-1 text-five" @click="gonggao">公告公示</view>
			</view>
			<view class="wraper-row-nine"></view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: '服务',
				list4: [{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],

			}
		},
		onLoad() {

		},
		methods: {
			tcjf() {
				uni.navigateTo({
					url: './temporaryCarPark'
				})
			},
			shequ() {
				uni.navigateTo({
					url: '../index/activities/activities'
				})
			},
			gonggao() {
				uni.navigateTo({
					url: '../index/activities/activities'
				})
			},
			weixiu() {
				uni.navigateTo({
					url: '../index/maintenancereport/jianxiu'
				})
			},
			fangke() {
				uni.navigateTo({
					url: '../index/example/invitation'
				})
			},
			www() {
				uni.navigateTo({
					url: '../index/stylepay/livingexpenses/livingexpenses'
				})
			},
			tsjy() {
				uni.navigateTo({
					url: './complaintinfo'
				})
			},
			zhifu() {
				this.$axios({
					url: '/housingestate/building/test',
					method: 'GET',
					data: {},
					success: (res) => {
						this.dataArr = res.data.list
					},
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.kkk {
		width: 600rpx;
		margin-left: -430rpx;
		height: 500rpx;
		// display:flex;
		// flex-direction: column;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	// .content {
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// 	justify-content: center;
	// }

	// .logo {
	// 	height: 200rpx;
	// 	width: 200rpx;
	// 	margin-top: 200rpx;
	// 	margin-left: auto;
	// 	margin-right: auto;
	// 	margin-bottom: 50rpx;
	// }

	// .text-area {
	// 	display: flex;
	// 	justify-content: center;
	// }

	// .title {
	// 	font-size: 36rpx;
	// 	color: #8f8f94;
	// }
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/
	.homepage {
		padding: 105.438rpx 0rpx 93.501rpx 37.798rpx;
		border-color: #c0c4cc;

		.wrapper {
			width: 660.477rpx;
			height: 320rpx;
			margin: 0rpx 0rpx 49.735rpx 5.968rpx;
			padding: 11.936rpx 0rpx 11.936rpx 458.554rpx;
			border-radius: 27.851rpx;
			background: #e7f0ff;
			margin-top: -100rpx;

			.wraper-row {
				width: 155.172rpx;
				height: 153.183rpx;
				border-radius: 198.939rpx;
				background: #3d65fe;
			}
		}

		.wrapper-two {
			width: 668.435rpx;
			height: 320.292rpx;
			margin-bottom: 71.618rpx;
			padding: 39.788rpx 0rpx 0rpx 43.767rpx;
			border-color: #cecece;
			border-radius: 39.788rpx;
			background: #ffffff;

			.wraper-row-two {
				width: 332.228rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 9.947rpx 13.926rpx;

				.box {
					width: 17.905rpx;
					height: 45.756rpx;
					border-radius: 39.788rpx;
					background: #3d65fe;
				}

				.text {
					width: 298.408rpx;
					font-size: 35.809rpx;
					text-align: left;
					font-weight: 500;
					color: rgba(57, 61, 73, 1);
				}
			}

			.wraper-row-three {
				width: 576.923rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 21.883rpx 7.958rpx;

				.box-two {
					width: 101.459rpx;
					height: 91.512rpx;
					margin-top: 9.947rpx;
					border-radius: 198.939rpx;
					background: #e7f0ff;
				}

				.box-three {
					width: 101.459rpx;
					height: 91.512rpx;
					margin-top: 9.947rpx;
					border-radius: 198.939rpx;
					background: #e7f0ff;
				}

				.box-four {
					width: 101.459rpx;
					height: 91.512rpx;
					margin-top: 5.968rpx;
					border-radius: 198.939rpx;
					background: #e7f0ff;
				}

				.box-five {
					width: 101.459rpx;
					height: 91.512rpx;
					border-radius: 198.939rpx;
					background: #e7f0ff;
				}
			}

			.wraper-row-four {
				width: 596.817rpx;
				justify-content: space-between;

				.text-two {
					width: 113.395rpx;
					margin-top: 5.968rpx;
				}

				.text-three {
					width: 113.395rpx;
					margin-top: 5.968rpx;
				}

				.text-four {
					width: 113.395rpx;
					margin-top: 5.968rpx;
				}

				.text-five {
					width: 113.395rpx;
				}
			}

			.text-six {
				width: 113.395rpx;
			}
		}

		.wrapper-three {
			width: 668.435rpx;
			padding: 35.809rpx 0rpx 47.944rpx 43.767rpx;
			border-radius: 39.788rpx;
			background: #ffffff;

			.wraper-row-five {
				width: 336.207rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 37.798rpx 11.936rpx;

				.box-six {
					width: 17.905rpx;
					height: 45.756rpx;
					margin-top: 5.968rpx;
					border-radius: 39.788rpx;
					background: #3d65fe;
				}

				.text {
					width: 298.408rpx;
					font-size: 35.809rpx;
					text-align: left;
					font-weight: 500;
					color: rgba(57, 61, 73, 1);
				}
			}

			.wraper-row-six {
				width: 574.934rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 9.947rpx 5.968rpx;

				.box-seven {
					width: 101.459rpx;
					height: 91.512rpx;
					margin-top: 5.968rpx;
					border-radius: 198.939rpx;
					background: #e7f0ff;
				}

				.box-eight {
					width: 101.459rpx;
					height: 91.512rpx;
					margin-top: 5.968rpx;
					border-radius: 198.939rpx;
					background: #e7f0ff;
				}

				.box-nine {
					width: 101.459rpx;
					height: 91.512rpx;
					margin-top: 5.968rpx;
					border-radius: 198.939rpx;
					background: #e7f0ff;
				}

				.box-ten {
					width: 101.459rpx;
					height: 91.512rpx;
					border-radius: 198.939rpx;
					background: #e7f0ff;
				}
			}

			.wraper-row-seven {
				width: 584.881rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 17.905rpx 5.968rpx;

				.text-two {
					width: 113.395rpx;
					margin-top: 5.968rpx;
				}

				.text-three {
					width: 113.395rpx;
					margin-top: 5.968rpx;
				}

				.text-four {
					width: 113.395rpx;
					margin-top: 5.968rpx;
				}

				.text-five {
					width: 113.395rpx;
				}
			}

			.wraper-row-eight {
				width: 101.459rpx;
				height: 91.512rpx;
				margin: 0rpx 0rpx 15.915rpx 5.968rpx;
				border-radius: 198.939rpx;
				background: #e7f0ff;
			}

			.text-six {
				width: 113.395rpx;
			}

			.wraper-row-nine {
				width: 101.459rpx;
				height: 91.512rpx;
				border-radius: 198.939rpx;
				top: -725540.451rpx;
				left: -38649.867rpx;
				background: #e7f0ff;
				position: absolute;
			}
		}
	}
</style>
